<template>
  <table-row-detail-dialog ref="detailDialog" @confirm="handleConfirm">
    <div class="dialog-body">
      <el-form ref="detailForm" label-width="90px">
        <el-form-item label="上级机构名称" v-if="parent">
          <el-input v-model="parent.organName" disabled></el-input>
        </el-form-item>
        <form-item-group
          :form-data="formData"
          ref="formGroup"
        ></form-item-group>
      </el-form>
    </div>
  </table-row-detail-dialog>
</template>

<script>
import TableRowDetailDialog from '@/components/TableRowDetailDialog/index';
import FormItemGroup from '@/components/FormItemGroup/index';

import { add, edit, detail } from '@/api/system/organ';

export default {
  name: 'ItemDetail',
  components: {
    TableRowDetailDialog,
    FormItemGroup,
  },
  props: {},
  data() {
    return {
      action: 'detail',
      itemData: null, //详情数据
      formData: [], //表单数据
      id: '',
      parent: null,
    };
  },
  computed: {},
  created() {},
  methods: {
    show(dialogType = 'detail', data) {
      this.dialogType = dialogType;
      this.initFormData();
      if (dialogType === 'add') {
        this.parent = data;
      } else if (data) {
        this.id = data.organId;
        this.getDetail();
      }
      this.$refs.detailDialog.show(dialogType);
    },
    /**
     * 初始化表单数据
     * */
    initFormData() {
      this.formData = {
        organName: { label: '机构名称', value: '', required: true },
        showOrder: { label: '机构排序', value: '', required: true },
        description: { label: '机构描述', value: '', type: 'textarea' },
        enable: {
          label: '机构状态',
          type: 'switch',
          dictKey: 'data_status',
          text: ['启用', '禁用'],
          value: 1,
        },
      };
    },
    /**
     * 获取记录详情
     * 填充表单数据对象
     * */
    getDetail() {
      detail(this.id).then((res) => {
        this.itemData = res;
        for (let key in this.formData) {
          this.formData[key].value = res[key];
        }
      });
    },

    /**
     * 对话框确认按钮响应
     * */
    handleConfirm() {
      let data = this.$refs.formGroup.checkValue();
      if (!data) {
        return false;
      }
      if (this.dialogType === 'add') {
        this.submitAdd(data);
      } else {
        this.submitEdit(data);
      }
    },
    /**
     * 添加记录
     * 校验表单数据后，add接口
     */
    submitAdd(data) {
      if (this.parent) {
        data.preorganid = this.parent.organId;
      }
      add(data).then(this.submitSuccess);
    },
    /**
     * 记录详情数据编辑提交
     * 校验表单数据后，调用edit接口
     */
    submitEdit(data) {
      edit(this.id, data).then(this.submitSuccess);
    },
    /**
     * 记录详情数据修改提交成功，触发data-change消息更新列表数据
     */
    submitSuccess() {
      this.$message.success(this.action === 'add' ? '添加成功' : '修改成功');
      this.hide();
      this.$emit('data-change');
    },
    /**
     * 隐藏对话框
     */
    hide() {
      this.$refs.detailDialog.hide();
      this.$emit('dialog-close');
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-body {
}
</style>
